<template>
  <el-dialog :title="title" :visible.sync="visible" :width="width" :close-on-click-modal='false' class="bonus">
    <el-row>
      <el-form :model="formData" ref="formRef" :label-width="labelWidth"  :rules="rules" v-loading="formLoading" :close-on-click-modal="false">
        <el-col :span="24">
          <el-form-item label="奖金项" prop="bonusItemName">
            <div class="flex">
              <el-input v-model="formData.bonusItemName" autocomplete="off" placeholder="请选择奖金项" clearable ></el-input>
              <el-button type="primary" plain @click="showDialog">选择</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="系统内奖金项编号" prop="bonusItemCode">
            <el-input v-model="formData.bonusItemCode" autocomplete="off" placeholder="请输入系统内奖金项编号" clearable disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="方案名称" prop="computeName">
            <el-input v-model="formData.computeName" autocomplete="off" placeholder="请输入方案名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="奖金金额" >
            <el-input-number class="w100 text-left" :controls="false" v-model="formData.bonusCount" autocomplete="off" placeholder="请输入奖金金额" clearable></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="奖金发放时间" prop="computeDate">
            <el-date-picker type="date" style="width: 100%"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      v-model="formData.computeDate" autocomplete="off"
                      placeholder="请选择奖金发放时间" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel(false)">取消</el-button>
      <el-button type="primary"  @click="handleSubmit">确定</el-button>
    </div>

    <!--选择奖金项-->
    <bonus-item ref="bonusItemRef" @sendBonusItem="getBonusItem"></bonus-item>

  </el-dialog>
</template>

<script>
import {addObj,putObj}  from '@/api/bonus/calculateuserprogramme' ;
import bonusItem from "@/views/bonusmanage/components/bonusItem";
export default {
  name: "addForm",
  components:{
    bonusItem
  },
  props:{

  },
  data(){
    return{
      type:'add',
      formLoading:false,
      title:'新增',
      width:'30%',
      visible: false,
      labelWidth:'140px',
      formData: {},
      rules: {
        bonusItemName: [{ required: true, message: '请输入奖金项名称', trigger: 'change' },],
        computeName: [{ required: true, message: '请输入方案名称', trigger: 'blur' }],
        bonusCount: [{validator:this.$validateUtil.amount,context:this,label:'奖金金额',required:true}],//验证引入通用的方法
        computeDate: [{ required: true, message: '请选择奖金发放时间', trigger: 'change' }],
      }
    }
  },
  methods:{
    init(type,data,bonusItemDeptId){
      this.type = type
      this.bonusItemDeptId = bonusItemDeptId ;//列表页面搜索栏中的负责机构id
      if (type == 'edit'){
        this.formData = data ;
        this.title = "编辑"
      }else{
        this.title = '新增'
      }
      this.visible = true ;
    },
    handleSubmit(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.formLoading = true ;
          if (this.type == 'add'){ //新增
            addObj(Object.assign(this.formData,{computeDeptId:this.bonusItemDeptId})).then(res=>{//computeDeptId 是列表页搜索栏中的 负责机构，将其一起保存
              this.formLoading = false ;
              this.handleCancel(true) ;
            }).catch(()=>{
              this.formLoading = false ;
            })
          }else{//编辑
            putObj(Object.assign(this.formData,{computeDeptId:this.bonusItemDeptId})).then(res=>{
              this.formLoading = false ;
              this.handleCancel(true) ;
            }).catch(()=>{
              this.formLoading = false ;
            })
          }

        } else {
          return false;
        }
      });
    },
    /**
     * @param refresh false 返回后不刷新 true 返回后刷新
     */
    handleCancel(refresh){
      this.visible = false ;
      this.formData = {} ;
      if (refresh){
        this.$emit('refresh')
      }
    },
    showDialog(){
      this.$refs.bonusItemRef.init(this.bonusItemDeptId)
    },
    getBonusItem(bonusItem){
      this.$set(this.formData,'bonusItemName',bonusItem.bonusItemName )
      this.$set(this.formData,'bonusItemCode',bonusItem.bonusItemCode )
    }
  }
}
</script>

<style scoped>

</style>
